<style lang="scss" scoped src="./entries.scss"></style>

<template lang="html">
  <section class="components-personal-entries">
    <div class="userpage_useroperation_book">
      <p class="entries-title">
        <i class="ic-list"></i>
        <span class="userpage_useroperation_book_mybook" @click="$router.push({ path: '/orders' })">我的预约</span>
      </p>
      <p class="userpage_useroperation_book_count" :class="{ active: hasRemainingOrder }">
        <template v-if="hasRemainingOrder">
          有<span>{{info.subjectCounts}}</span>节待上课
        </template>
        <template v-else>
          暂无预约课程
        </template>
      </p>
    </div>
    <div class="UserPage_useroperation_ticket" @click="$router.push({ path: '/property/coupon' })">
      <p class="entries-title">
        <i class="ic-coupon"></i>
        <span class="UserPage_useroperation_ticket_search">找优惠券</span>
      </p>
      <p class="UserPage_useroperation_ticket_convert">兑换优惠券</p>
    </div>
    <div class="UserPage_useroperation_help" @click="isShowWx = true">
      <p class="entries-title">
        <i class="ic-wechat"></i>
        <span class="UserPage_useroperation_help_contact">联系客服</span>
      </p>
      <p class="UserPage_useroperation_help_wechat">客服微信</p>
    </div>
    <div class="UserPage_useroperation_more">
      <p>更多功能敬请期待</p>
    </div>
    <div class="service_wx-wrap" v-show="isShowWx">
      <div class="service_wx">
        <i class="ic-close" @click="isShowWx = false"></i>
        <img :src="_PREFIX_  + 'zplus-service-wx.jpg'" alt="">
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'entries-member',
  props: {
    info: {
      type: Object,
      required: true
    }
  },
  data(){
    return {
      isShowWx: false
    }
  },
  computed: {
    hasRemainingOrder(){
      return !!this.info && this.info.subjectCounts > 0
    }
  }
}
</script>
